<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="work-css.css">
    <title>(实验课作业) 制作人：王修航-2410250215-软件工程</title>
</head>

<body>
    <div id="top">
        <a href="http://m.bilibili/" class="logo"><img src="images/哔哩哔哩小电视图片.ico" alt="Bilibili"></a>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">番剧</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">漫画</a></li>
                <li><a href="#">赛事</a></li>
            </ul>
        </nav>
        <div class="sousuo"><input type="text" placeholder="请输入搜索的视频或者up主"><a href="#" class="sousuo-logo"><img
                    src="images/搜索.webp" alt="搜索"></a>
            <div id="sousuo-redian">
                <p><a href="#"><span class="redian-1">1</span>《轻涟》补完计划！高中生打磨了一年的芙芙传说音乐剧</a></p>
                <p><a href="#"><span class="redian-2">2</span>突袭!毕业5年的up主还记得多少专业知识?!</a></p>
                <p><a href="#"><span class="redian-3">3</span>每一帧都在赌？独家对话汤姆·克鲁斯的“特工”生涯</a></p>
                <p><a href="#"><span class="redian-other">4</span>【MrBeast首发】50万美元挑战内马尔和库里!</a></p>
                <p><a href="#"><span class="redian-other">5</span>南方将迎今年最大范围暴雨</a></p>
            </div>
        </div>

        <img src="images/哔哩哔哩logo.png">
        <div class="denglu"><a href="个人中心.html">登录</a></div>
        <div class="tougao">
            <a href="#">投稿</a>
            <div class="see-content">
                <div><a href="#"><img src="images/文件上传.png"><br>文件上传</a></div>
                <div><a href="#"><img src="images/视频.png"><br>视频上传</a></div>
                <div><a href="#"><img src="images/音乐.png"><br>音乐上传</a></div>
                <div><a href="#"><img src="images/设置.png"><br>投稿设置</a></div>
            </div>
        </div>
    </div>

    <div id="main">
        <div class="part1">
            <div class="toubu">
                <div><a href="#"><img src="images/首页图片.webp" alt="">首页</a></div>
                <div><a href="动态.html"><img src="images/动态.gif" alt="">动态</a></div>
                <div><a href="rank.html"><img src="images/排行.jpg" alt="">排行榜</a></div>
            </div>
            <div class="fenqu">
                <a href="#">
                    <div class="number">999+</div><span>动画</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>音乐</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>舞蹈</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>科技</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>生活</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>时尚</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>影视</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>娱乐</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>番剧</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>国创</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>游戏</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>数码</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>咨询</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>舞蹈</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>社交</span>
                </a>
                <a href="#">
                    <div class="number">999+</div><span>VLOG</span>
                </a>
            </div>
            <div class="weibu">
                <a href="#">
                    <div><img src="images/专栏.webp"><span>专栏</span></div>
                </a>
                <a href="#">
                    <div><img src="images/直播.gif"><span>直播</span></div>
                </a>
                <a href="#">
                    <div><img src="images/活动.gif"><span>活动</span></div>
                </a>
                <br>
                <a href="#">
                    <div><img src="images/课堂.gif"><span>课堂</span></div>
                </a>
                <a href="#">
                    <div><img src="images/小黑屋.gif"><span>小黑屋</span></div>
                </a>
                <a href="#">
                    <div><img src="images/音乐.gif"><span>音乐PLUS</span></div>
                </a>
            </div>
        </div>
        <div class="part2">
            <div class="banner">
                <span href="" class='zuo'>&lt;</span>
                <span href="" class='you'>&gt;</span>
                <div class="banner_pic" id="banner_pic">
                    <img src="images/轮播图-1.jpg" alt="" class="current" />
                    <img src="images/轮播图-2.jpg" alt="" class="pic" />
                    <img src="images/轮播图-3.jpg" alt="" class="pic" />
                    <img src="images/轮播图-4.jpg" alt="" class="pic" />
                </div>
                <ol id="button">
                    <li data-index=0 data-name="point" class="current"></li>
                    <li data-index=1 data-name="point" class="but"></li>
                    <li data-index=2 data-name="point" class="but"></li>
                    <li data-index=3 data-name="point" class="but"></li>
                </ol>
            </div>
            <div class="tuijian">
                <a href="#">
                    <img src="images/推荐1.avif" alt="【毕导】这个定律，预言了你的人生进度条">
                    <p>【毕导】这个定律，预言了你的人生进度条<br><span>毕导·5-10</span></p>
                </a>
                <a href="#">
                    <img src="images/推荐3.avif" alt="我竟然登上了中国军舰!体验中国海军节!">
                    <p>我竟然登上了中国军舰!体验中国海军节!<br><span>老李船长·7小时前</span></p>
                </a>
                <div id="change">
                    <a href="#"><img src="images/换一换.jpg">换一换</a>
                </div>
            </div>

        </div>
        <div class="part3">
            <div class="tuiguang" id="tuiguang">
                <div class="mingcheng"><span class="pindao-logo"><img src="images/推广.jpg">推广</span>
                    <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span></div>
                </div>
                <div class="neirong">
                    <div class="zuobu">
                        <a href="#">
                            <img src="images/推广1.avif" alt="永恒的方块宝可梦 整合包生存试玩">
                            <p>永恒的方块宝可梦 整合包生存试玩<br><span>籽岷·4-1</span></p>
                        </a>
                        <a href="#">
                            <img src="images/推广2.avif" alt="压迫感还是太强了">
                            <p>压迫感还是太强了<br><span>银与绯· 6小时前</span></p>
                        </a>
                        <a href="#">
                            <img src="images/推广3.avif" alt="“那一刻他终于明白，取经的意义”">
                            <p>“那一刻他终于明白，取经的意义”<br><span>不愚人的愚人杰· 5-22</span></p>
                        </a>
                        <a href="#">
                            <img src="images/推广4.avif" alt="推荐">
                            <p>19800元买到了什么？索尼FX2上手<br><span>影视飓风· 5小时前</span></p>
                        </a>
                    </div>
                    <div class="youbu">
                        <a href="#"><img src="images/广告3.jpg"></a>
                    </div>
                </div>
            </div>
            <div class="guanggao"><a href="#"><img src="images/广告1.jpg"></a></div>
            <div class="pindao" id="zhibo">
                <div class="mingcheng"><span class="pindao-logo"><img src="images/直播.jpg">正在直播</span>
                    <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                    </div>
                </div>
                <div class="neirong">
                    <div class="zuobu">
                        <a href="#">
                            <img src="images/直播1.avif" alt="推荐">
                            <p>从一个草方块到自动化天空工厂【机械动力空岛EP01】<br><span>一地鹅毛Cc</span></p>
                        </a>
                        <a href="#">
                            <img src="images/直播2.avif" alt="推荐">
                            <p>MC速通排位周赛中国第一，世界第一！<br><span>夏末ys</span></p>
                        </a>
                        <a href="#">
                            <img src="images/直播3.avif" alt="推荐">
                            <p>超级上海保卫战实时画面！策划别锁血了！<br><span>清夜official</span></p>
                        </a>
                        <a href="#">
                            <img src="images/直播4.avif" alt="推荐">
                            <p>雾中人替身大乱斗<br><br><span>-詩柒-</span></p>
                        </a>
                        <a href="#">
                            <img src="images/直播5.avif" alt="推荐">
                            <p>手机pk电脑、运行pc端3a大作？红魔10s pro+ 性能怪兽！<br><span>科技趣室</span></p>
                        </a>
                        <a href="#">
                            <img src="images/直播6.avif" alt="推荐">
                            <p>饥荒可挂文明6<br><br><span>星海吖0-0</span></p>
                        </a>
                        <a href="#">
                            <img src="images/直播7.avif" alt="推荐">
                            <p>要蹦蹦炸弹了<br><br><span>_诀别诗__</span></p>
                        </a>
                        <a href="#">
                            <img src="images/直播8.avif" alt="推荐">
                            <p>叮咚！华硕天选6X 台式机开箱来啦!<br><br><span>华硕天选官方UP</span></p>
                        </a>
                    </div>
                    <div class="youbu">
                        <a href="#"><img src="images/直播广告.jpg"></a>
                    </div>
                </div>

            </div>
        </div>

        <div class="pindao" id="donghua">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/动画.gif">动画</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/动画1.avif" alt="推荐">
                        <p>哪吒2片尾水墨MV公开！我想试试改变这个世界！<br><span>电影哪吒之魔童闹海 · 02-19</span></p>
                    </a>
                    <a href="#">
                        <img src="images/动画2.avif" alt="推荐">
                        <p>【配音演员李团】你可能不认识我，但你一定听过我的声音<br><span>配音演员李团 · 05-22</span></p>
                    </a>
                    <a href="#">
                        <img src="images/动画3.avif" alt="推荐">
                        <p>空条承太郎人物志1-无敌的铁拳闪烁战神光辉，硬汉外壳包裹良善之魂<br><span>晨瞳聊人物 · 04-28</span></p>
                    </a>
                    <a href="#">
                        <img src="images/动画4.avif" alt="推荐">
                        <p>咔！！嚓！！！！<br><br><span>江肥肠 · 05-28</span></p>
                    </a>
                    <a href="#">
                        <img src="images/动画5.avif" alt="推荐">
                        <p>灵笼2开播！全面揭晓隐藏细节！【灵笼2】01逐帧解析<br><span>利维坦mY · 05-23</span></p>
                    </a>
                    <a href="#">
                        <img src="images/动画6.avif" alt="推荐">
                        <p>全球影史评分最高的10部动画电影！每部都是必看神作！<br><span>何亦计划 · 05-11</span></p>
                    </a>
                    <a href="#">
                        <img src="images/动画7.avif" alt="推荐">
                        <p>《猫和老鼠》中的风景竟然有这么多细节？！<br><span>大福咕咕 · 03-14</span></p>
                    </a>
                    <a href="#">
                        <img src="images/动画8.avif" alt="推荐">
                        <p>【反应视频】学历不够真看不懂！火柴人跟物理又干上了<br><span>玩游戏的姚sir · 05-26</span></p>
                    </a>
                </div>
                <div class="youbu">
                    <div class="paihang">
                        <h2>排行榜</h2>
                        <hr>
                        <div class="paihang">
                            <p><a href="#"><span class="redian-1">1</span>《轻涟》补完计划！高中生打磨了一年的芙芙传说音乐剧</a></p>
                            <p><a href="#"><span class="redian-2">2</span>《天眼游戏》完整合集</a></p>
                            <p><a href="#"><span class="redian-3">3</span>《假 如 活 在 二 次 元 世 界》</a></p>
                            <p><a href="#"><span class="redian-other">4</span>不如我们再来一次</a></p>
                            <p><a href="#"><span class="redian-other">5</span>甲方：好歹是宣传出去了。。。。</a></p>
                            <p><a href="#"><span class="redian-other">6</span>火影vs仙侠？看修仙和火影的都沉默了！</a></p>
                            <p><a href="#"><span
                                        class="redian-other">7</span>几秒一个细节，几帧一个彩蛋，又回到过去挖掘小秘密的快乐时光（瑞克和莫蒂第八季第一集·彩蛋）#319</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pindao" id="fanju">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/番剧.jpg">番剧</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu" id="fanju1">
                    <a href="#">
                        <img src="images/番剧1.avif" alt="推荐">
                        <div>
                            <div>紫罗兰永恒花园</div>
                            <div class="ji">咦？我的眼泪</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧2.avif" alt="推荐">
                        <div>
                            <div>孤独摇滚</div>
                            <div class="ji">女孩的乐队梦想</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧3.avif" alt="推荐">
                        <div>
                            <div>工作细胞（中配版） </div>
                            <div class="ji">大妹子，你咋的啦？</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧4.avif" alt="推荐">
                        <div>
                            <div>坂本日常</div>
                            <div class="ji">这个杀手不太瘦</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧5.avif" alt="推荐">
                        <div>
                            <div>葬送的芙莉莲</div>
                            <div class="ji">花海盛开，故人归来</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧6.avif" alt="推荐">
                        <div>
                            <div>Charlotte</div>
                            <div class="ji">等你回来</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧7.avif" alt="推荐">
                        <div>
                            <div>我独自升级 第二季 -起于暗影- </div>
                            <div class="ji">暗影君王再临</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧8.avif" alt="推荐">
                        <div>
                            <div>鬼灭之刃</div>
                            <div class="ji">谁都斩不断的羁绊</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧9.avif" alt="推荐">
                        <div>
                            <div>中二病也要谈恋爱</div>
                            <div class="ji">吾之名为暗焰魔法使</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧10.avif" alt="推荐">
                        <div>
                            <div>我的青春恋爱物语果然有问题。</div>
                            <div class="ji">青春是一种谎言</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧11.avif" alt="推荐">
                        <div>
                            <div>四月是你的谎言</div>
                            <div class="ji">没有你的四月又来了</div>
                        </div>
                    </a>
                    <a href="#">
                        <img src="images/番剧12.avif" alt="推荐">
                        <div>
                            <div>刀剑神域</div>
                            <div class="ji">星爆气流斩</div>
                        </div>
                    </a>
                </div>
                <div class="youbu">
                    <a href="#"><img src="images/番剧广告.jpg"></a>
                </div>
            </div>
        </div>
        <div class="guanggao"><a href="#"><img src="images/广告4.jpg"></a></div>
        <div class="pindao" id="manhua">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/漫画.png">漫画</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu" id="manhua1">
                    <a href="#">
                        <img src="images/漫画1.avif" alt="推荐">
                        <p>明日方舟：序言组曲<br><span>更新至 09 话</span></p>
                    </a>
                    <a href="#">
                        <img src="images/漫画2.avif" alt="推荐">
                        <p>孤独摇滚<br><span>更新至 87 话</span></p>
                    </a>
                    <a href="#">
                        <img src="images/漫画3.avif" alt="推荐">
                        <p>犬夜叉（WIDE版）<br><span>[完结] 共 588 话</span></p>
                    </a>
                    <a href="#">
                        <img src="images/漫画4.avif" alt="推荐">
                        <p>间谍过家家<br><span>更新至 番外篇</span></p>
                    </a>
                    <a href="#">
                        <img src="images/漫画5.avif" alt="推荐">
                        <p>非人哉<br><span>更新至 1120 话</span></p>
                    </a>
                    <a href="#">
                        <img src="images/漫画6.avif" alt="推荐">
                        <p>有兽焉<br><span>更新至 1046 话</span></p>
                    </a>
                    <a href="#">
                        <img src="images/漫画7.avif" alt="推荐">
                        <p>蓝色监狱<br><span>更新至 304 话</span></p>
                    </a>
                    <a href="#">
                        <img src="images/漫画8.avif" alt="推荐">
                        <p>怪兽8号<br><span>更新至 第126话</span></p>
                    </a>






                </div>
                <div class="youbu">
                    <div class="paihang">
                        <h2>排行榜</h2>
                        <hr>
                        <div class="paihang">
                            <p><a href="#"><span class="redian-1">1</span>名侦探柯南</a></p>
                            <p><a href="#"><span class="redian-2">2</span>入间同学入魔了！</a></p>
                            <p><a href="#"><span class="redian-3">3</span>航海王</a></p>
                            <p><a href="#"><span class="redian-other">4</span>香格里拉边境~粪作猎人向神作游戏发起挑战~</a></p>
                            <p><a href="#"><span class="redian-other">5</span>蓝色监狱</a></p>
                            <p><a href="#"><span class="redian-other">6</span>间谍过家家</a></p>
                            <p><a href="#"><span class="redian-other">7</span>关于我转生变成史莱姆这档事</a></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="pindao" id="yinyue">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/音乐.png">音乐</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/音乐1.avif" alt="推荐">
                        <p>“我的眼泪从来没有因为幸福而流过”<br><span>醉心日推音乐 · 2024-12-12</span></p>
                    </a>
                    <a href="#">
                        <img src="images/音乐2.avif" alt="推荐">
                        <p>埃文闪现火星演唱会：对话华晨宇，寻找演唱会“新世界”！<br><span>EvanKail埃文凯尔 · 05-09</span></p>
                    </a>
                    <a href="#">
                        <img src="images/音乐3.avif" alt="推荐">
                        <p>哪吒2角色曲《就是哪吒》MV！每个不妥协的人都是哪吒！<br><span>歌手唐汉霄 · 01-29</span></p>
                    </a>
                    <a href="#">
                        <img src="images/音乐4.avif" alt="推荐">
                        <p>《绝区零》雨果EP | My Curse, My Fate「Destin et malédiction」 <br><span>绝区零 · 05-13</span></p>
                    </a>
                    <a href="#">
                        <img src="images/音乐5.avif" alt="推荐">
                        <p>《崩坏：星穹铁道》2025演唱会：「希望有羽毛和翅膀」<br><span>崩坏星穹铁道 · 05-02</span></p>
                    </a>
                    <a href="#">
                        <img src="images/音乐6.avif" alt="推荐">
                        <p>"那些直击心灵的节奏音乐"<br><span>挽风丶Sama · 05-23</span></p>
                    </a>
                    <a href="#">
                        <img src="images/音乐7.avif" alt="推荐">
                        <p>春晚中译版《Counting Stars》歌词有多惊艳<br><span>央视新闻 · 01-31</span></p>
                    </a>
                    <a href="#">
                        <img src="images/音乐8.avif" alt="推荐">
                        <p>【Official Music Video】春日影(MyGO!! ver.) / MyGO!!【原创歌曲】<br><span>MyGO_AveMujica · 04-28</span>
                        </p>
                    </a>
                </div>
                <div class="youbu">
                    <div class="paihang">
                        <h2>排行榜</h2>
                        <hr>
                        <div class="paihang">
                            <p><a href="#"><span class="redian-1">1</span>天真的橡皮</a></p>
                            <p><a href="#"><span class="redian-2">2</span>THUNDER</a></p>
                            <p><a href="#"><span class="redian-3">3</span>Kamin</a></p>
                            <p><a href="#"><span class="redian-other">4</span>Good Thing</a></p>
                            <p><a href="#"><span class="redian-other">5</span>珠玉</a></p>
                            <p><a href="#"><span class="redian-other">6</span>月亮照山川</a></p>
                            <p><a href="#"><span class="redian-other">7</span>拂晓 Proi Proi</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pindao" id="wudao">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/舞蹈.jpg">舞蹈</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/舞蹈1.avif" alt="推荐">
                        <p>挑战还原燕云·醉花阴·樊楼飞天舞<br><br><span>小暮mumu · 05-26</span></p>
                    </a>
                    <a href="#">
                        <img src="images/舞蹈2.avif" alt="推荐">
                        <p>当双节棍按上非遗打铁花<br><br><span>袁创棍法 · 01-27</span></p>
                    </a>
                    <a href="#">
                        <img src="images/舞蹈3.avif" alt="推荐">
                        <p>麻辣女兵和酱香男兵才艺展示！<br><br><span>兔熊乱忙 · 05-19</span></p>
                    </a>
                    <a href="#">
                        <img src="images/舞蹈4.avif" alt="推荐">
                        <p>4年艾斯米拉达变奏历程<br><br><span>郎音阁DrDai · 05-09</span></p>
                    </a>
                    <a href="#">
                        <img src="images/舞蹈5.avif" alt="推荐">
                        <p>【摩登表演舞】用芙卡洛斯谢幕曲跳一支维也纳华尔兹<br><span>Ada艾达_摸鱼版 · 04-01</span></p>
                    </a>
                    <a href="#">
                        <img src="images/舞蹈6.avif" alt="推荐">
                        <p>【酱吧中字】酱大师开课了！Bag Bad Back编舞师的正统舞蹈教程<br><span>将太郎吧_SHOTARO · 05-28</span></p>
                    </a>
                    <a href="#">
                        <img src="images/舞蹈7.avif" alt="推荐">
                        <p>浦安之舞 巫女舞（扇+鈴）二人舞<br><br><span>雨音神社official · 05-28</span></p>
                    </a>
                    <a href="#">
                        <img src="images/舞蹈8.avif" alt="推荐">
                        <p>拼凑的梦要醒了<br><br><span>樱庭芥子 · 05-24</span></p>
                    </a>
                </div>
                <div class="youbu">
                    <div class="paihang">
                        <h2>排行榜</h2>
                        <hr>
                        <div class="paihang">
                            <p><a href="#"><span class="redian-1">1</span>猫耳开关</a></p>
                            <p><a href="#"><span class="redian-2">2</span>5年2个人等于0</a></p>
                            <p><a href="#"><span class="redian-3">3</span>【舞动青春cos】你是说出自推参加比赛然后拿到双冠吗</a></p>
                            <p><a href="#"><span class="redian-other">4</span>拼凑的梦要醒了</a></p>
                            <p><a href="#"><span class="redian-other">5</span>宝宝你是一个人机！</a></p>
                            <p><a href="#"><span class="redian-other">6</span>蒸溜水来了，感谢原创作者田一名老师，我是模仿者</a></p>
                            <p><a href="#"><span class="redian-other">7</span>7座机画质😂#千禧摇</a></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="pindao" id="youxi">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/游戏.jpg">游戏</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/游戏1.avif" alt="推荐">
                        <p>【第五人格填词】“万场游戏，不过一弈”<br><span>后藤老贼芜湖起飞 · 5小时前</span></p>
                    </a>
                    <a href="#">
                        <img src="images/游戏2.avif" alt="推荐">
                        <p>【浪子宇】《黑暗之魂2原罪学者》包爽迅猛流攻略！白金|全流程|全支线<br><span>Niko浪子宇 · 05-25</span></p>
                    </a>
                    <a href="#">
                        <img src="images/游戏3.avif" alt="推荐">
                        <p>最感动结局《说谎公主与盲眼王子》<br><br><span>谢谢我很喜欢丨 · 03-30</span></p>
                    </a>
                    <a href="#">
                        <img src="images/游戏4.avif" alt="推荐">
                        <p>独立游戏大电影！数年难遇神作！《Indie Cross》究竟讲了什么？<br><span>Pines_Z · 05-09</span></p>
                    </a>
                    <a href="#">
                        <img src="images/游戏5.avif" alt="推荐">
                        <p>莫慌！等我吃完庄园里的牛排，就戴上反重甲的项圈，去和圣殿骑士对卷！【帝国时代4】<br><span>DarkCarrot · 昨天</span></p>
                    </a>
                    <a href="#">
                        <img src="images/游戏6.avif" alt="推荐">
                        <p>打造世界 决战天下mod EP10 无尽宝藏 深辰解说<br><span>深辰S · 昨天</span></p>
                    </a>
                    <a href="#">
                        <img src="images/游戏7.avif" alt="推荐">
                        <p>[丹穹]没事的……你不会死的……你一定不会死……一定……<br><span>K_Ksalmon · 05-04</span></p>
                    </a>
                    <a href="#">
                        <img src="images/游戏8.avif" alt="推荐">
                        <p>共生第1天：豌豆射手升级路径一<br><br><span>厘子gg · 04-14</span></p>
                    </a>
                </div>
                <div class="youbu">
                    <div class="paihang">
                        <a href="#"><img src="images/游戏广告.jpg"></a>
                    </div>
                </div>
            </div>

        </div>
        <div class="pindao" id="keji">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/科技.jpg">科技</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/科技1.avif" alt="推荐">
                        <p>终极对决！AMD大战NVIDIA！显卡大乱斗！【天才赵德柱】<br><span>天才赵德柱 · 04-20</span></p>
                    </a>
                    <a href="#">
                        <img src="images/科技2.avif" alt="推荐">
                        <p>我还原了上世纪的显示器！<br><br><span>黑人黑科技 · 04-17</span></p>
                    </a>
                    <a href="#">
                        <img src="images/科技3.avif" alt="推荐">
                        <p>影视飓风的评测问题<br><br><span>影视飓风 · 04-19</span></p>
                    </a>
                    <a href="#">
                        <img src="images/科技4.avif" alt="推荐">
                        <p>现在的针孔摄像头到底有多小？<br><br><span>黑客老K · 04-15</span></p>
                    </a>
                    <a href="#">
                        <img src="images/科技5.avif" alt="推荐">
                        <p>还原世界上最大的飞机！我们造了一架AN-225<br><span>魔界造物 · 05-09</span></p>
                    </a>
                    <a href="#">
                        <img src="images/科技6.avif" alt="推荐">
                        <p>自制招财猫打雪仗机甲<br><br><span>手工耿· 01-22</span></p>
                    </a>
                    <a href="#">
                        <img src="images/科技7.avif" alt="推荐">
                        <p>400天15万公里！这台相机走遍了整个地球？<br><span>-LKs- · 02-24</span></p>
                    </a>
                    <a href="#">
                        <img src="images/科技8.avif" alt="推荐">
                        <p>首次尝试19.5:9画幅，用新疆样片填满你的手机！<br><span>影视飓风 · 04-27</span></p>
                    </a>
                </div>
                <div class="youbu">
                    <div class="paihang">
                        <h2>排行榜</h2>
                        <hr>
                        <div class="paihang">
                            <p><a href="#"><span class="redian-1">1</span>评论区摄影作品锐评，最有张力的一期，看完不笑的可以确诊瓦学弟了.</a></p>
                            <p><a href="#"><span class="redian-2">2</span>狠心拆除末日兔兔沼气池防御塔，在厕所上方打造船新兔兔牧场</a></p>
                            <p><a href="#"><span class="redian-3">3</span>手机运行黑神话悟空！我们用红魔10S Pro+上手体验了PC游戏</a></p>
                            <p><a href="#"><span class="redian-other">4</span>不同年代人去拍肖像照都是怎样的状态？时尚真的是个轮回？最后我也是紧张疯了！</a>
                            </p>
                            <p><a href="#"><span class="redian-other">5</span>开着挖机游全国的路上在贵州遇到山体滑坡，展开救援！</a></p>
                            <p><a href="#"><span class="redian-other">6</span>「Links」学摄影10年，第一次拿起电影机FX2….</a></p>
                            <p><a href="#"><span class="redian-other">7</span>【热男】vivo S30 Pro mini怎么一回事啊！又大又小的</a></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="pindao" id="shuma">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/数码.jpg">数码</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/数码1.avif" alt="推荐">
                        <p>科技up主自做的电脑 每项功能刷新你的认知，停更175天交的作业可还满意<br><span>玩屋x · 02-16</span></p>
                    </a>
                    <a href="#">
                        <img src="images/数码2.avif" alt="推荐">
                        <p>是你的错觉吗？视频音量为什么越来越响了<br><span>影视飓风 · 02-12</span></p>
                    </a>
                    <a href="#">
                        <img src="images/数码3.avif" alt="推荐">
                        <p>Hi的步伐？2025 618耳机推荐集！230款有线无线推荐指南，建议收藏<br><span>釟音盒 · 18小时前</span></p>
                    </a>
                    <a href="#">
                        <img src="images/数码4.avif" alt="推荐">
                        <p>新显卡容易烧接口？我开发了一条多功能12V-2X6Ti智能电源线来补救！<br><span>翼王 · 05-22</span></p>
                    </a>
                    <a href="#">
                        <img src="images/数码5.avif" alt="推荐">
                        <p>随身带的设备，有点不正常？2025影视飓风员工包里有什么！<br><span>影视飓风 · 04-30</span></p>
                    </a>
                    <a href="#">
                        <img src="images/数码6.avif" alt="推荐">
                        <p>不想买到二手货当大冤种，新机到手这几步一定要做好<br><span>小doro爱玩机 · 05-24</span></p>
                    </a>
                    <a href="#">
                        <img src="images/数码7.avif" alt="推荐">
                        <p>自研玄戒O1让小米15S Pro比Ultra更骄傲<br><span>超离谱科技 · 05-22</span></p>
                    </a>
                    <a href="#">
                        <img src="images/数码8.avif" alt="推荐">
                        <p>【TC/熟肉】DVD 上的隐藏字幕被人遗忘<br><span>墨枫梧桐_BA7MQN · 05-28</span></p>
                    </a>
                </div>
                <div class="youbu">
                    <a href="#"><img src="images/数码广告.jpg"></a>
                </div>
            </div>

        </div>
        <div class="pindao" id="shenghuo">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/生活.jpg">生活</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/生活1.avif" alt="推荐">
                        <p>《所罗门群岛》第2集：被鳄鱼赶下岛，还与鲨鱼群斗智斗勇长达数小时<br><span>OK哥环球探海记 · 03-30</span></p>
                    </a>
                    <a href="#">
                        <img src="images/生活2.avif" alt="推荐">
                        <p>这么厉害的动作，你会喜欢哪一个？<br><br><span>小强会武术 · 04-21</span></p>
                    </a>
                    <a href="#">
                        <img src="images/生活3.avif" alt="推荐">
                        <p>海南探钓金目鲈 怎么就这么难<br><br><span>马李澳到处钓 · 04-11</span></p>
                    </a>
                    <a href="#">
                        <img src="images/生活4.avif" alt="推荐">
                        <p>孩子们把我带回家拿粮食，我去钓大鱼还给他们吃！<br><span>吴天宇钓鱼 · 05-13</span></p>
                    </a>
                    <a href="#">
                        <img src="images/生活5.avif" alt="推荐">
                        <p>在喜马拉雅拜师，有些路，还是得自己一个人走。<br><span>韩船长漂流记 · 04-28</span></p>
                    </a>
                    <a href="#">
                        <img src="images/生活6.avif" alt="推荐">
                        <p>生命中必须有的10天！<br><br><span>狂阿弥_ · 04-23</span></p>
                    </a>
                    <a href="#">
                        <img src="images/生活7.avif" alt="推荐">
                        <p>挑战从一条裤衩开始城市生存赚钱！能活几天？【负债生存 1】<br><span>抽象老谢 · 05-16</span></p>
                    </a>
                    <a href="#">
                        <img src="images/生活8.avif" alt="推荐">
                        <p>遭遇暴风被困太平洋中央，只有一些面条充饥<br><span>Peter船长环球旅行 · 05-08</span></p>
                    </a>
                </div>
                <div class="youbu">
                    <div class="paihang">
                        <h2>排行榜</h2>
                        <hr>
                        <div class="paihang">
                            <p><a href="#"><span
                                        class="redian-1">1</span>热烈欢迎蔡明老师，返场啦！还带来了很多她最近买到的好用的&踩雷的东西。（已经开始期待第三次返场了！</a>
                            </p>
                            <p><a href="#"><span class="redian-2">2</span>偶遇撒贝宁，好帅好年轻！就是。。。</a></p>
                            <p><a href="#"><span class="redian-3">3</span>特厨探店 |济南最出名的老字号？！</a></p>
                            <p><a href="#"><span class="redian-other">4</span>那些年买过的宿舍小零食！</a></p>
                            <p><a href="#"><span class="redian-other">5</span>BangBangBang超级改编饼！饼！饼！</a></p>
                            <p><a href="#"><span class="redian-other">6</span>我不理解因为我妈从不会教我谦让，而是 【刘若英演唱会两姐妹】</a></p>
                            <p><a href="#"><span class="redian-other">7</span>挑战花100元点拼好饭能点到多少东西！</a></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="pindao" id="dianying">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/电影.jpg">电影</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/电影1.webp" alt="推荐">
                        <p>唐探1990<br><span>喜剧 / 动作 / 悬疑</span></p>
                    </a>
                    <a href="#">
                        <img src="images/电影2.webp" alt="推荐">
                        <p>疯狂动物城2<br><span>剧情/ 喜剧 / 动作 </span></p>
                    </a>
                    <a href="#">
                        <img src="images/电影3.webp" alt="推荐">
                        <p>黄沙漫天<br><span>喜剧 / 战争</span></p>
                    </a>
                    <a href="#">
                        <img src="images/电影4.webp" alt="推荐">
                        <p>根本停不下来<br><span>冒险 / 喜剧 </span></p>
                    </a>
                    <a href="#">
                        <img src="images/电影5.webp" alt="推荐">
                        <p>美国队长4<br><span>冒险 / 动作 / 科幻</span></p>
                    </a>
                    <a href="#">
                        <img src="images/电影6.webp" alt="推荐">
                        <p>误杀3<br><span>剧情 / 犯罪 / 悬疑</span></p>
                    </a>
                    <a href="#">
                        <img src="images/电影7.webp" alt="推荐">
                        <p>毒液：最后一舞<br><span>动作 / 惊悚 / 科幻 </span></p>
                    </a>
                    <a href="#">
                        <img src="images/电影8.webp" alt="推荐">
                        <p>让子弹飞<br><span>剧情 / 喜剧 / 动作</span></p>
                    </a>
                </div>
                <div class="youbu">
                    <div class="paihang">
                        <h2>排行榜</h2>
                        <hr>
                        <div class="paihang">
                            <p><a href="#"><span class="redian-1">1</span>唐探1900</a></p>
                            <p><a href="#"><span class="redian-2">2</span>向阳·花</a></p>
                            <p><a href="#"><span class="redian-3">3</span>穿越时空的少女</a></p>
                            <p><a href="#"><span class="redian-other">4</span>怒水西流</a></p>
                            <p><a href="#"><span class="redian-other">5</span>不说话的爱</a></p>
                            <p><a href="#"><span class="redian-other">6</span>胜券在握</a></p>
                            <p><a href="#"><span class="redian-other">7</span>哈利·波特与魔法石</a></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="pindao" id="dianshiju">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/电视剧.jpg">电视剧</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/电视剧1.webp" alt="推荐">
                        <p>家有儿女<br><span>搞笑 / 家庭 / 喜剧 </span></p>
                    </a>
                    <a href="#">
                        <img src="images/电视剧2.webp" alt="推荐">
                        <p>师傅<br><span>悬疑</span></p>
                    </a>
                    <a href="#">
                        <img src="images/电视剧3.webp" alt="推荐">
                        <p>铠甲勇士刑天<br><span>剧情 / 科幻 </span></p>
                    </a>
                    <a href="#">
                        <img src="images/电视剧4.webp" alt="推荐">
                        <p>外来媳妇本地郎<br><span>家庭</span></p>
                    </a>
                    <a href="#">
                        <img src="images/电视剧5.webp" alt="推荐">
                        <p>米兰达 第一季<br><span>经典 / 情感 / 剧情 </span></p>
                    </a>
                    <a href="#">
                        <img src="images/电视剧6.webp" alt="推荐">
                        <p>生活大爆炸 第一季<br><span>喜剧</span></p>
                    </a>
                    <a href="#">
                        <img src="images/电视剧7.webp" alt="推荐">
                        <p>孤独的美食家 番外篇<br><span>剧情 / 搞笑</span></p>
                    </a>
                    <a href="#">
                        <img src="images/电视剧8.webp" alt="推荐">
                        <p>神盾局特工 第三季<br><span>剧情 / 动作 / 科幻 </span></p>
                    </a>
                </div>
                <div class="youbu">
                    <div class="paihang">
                        <h2>排行榜</h2>
                        <hr>
                        <div class="paihang">
                            <p><a href="#"><span class="redian-1">1</span>三国演义</a></p>
                            <p><a href="#"><span class="redian-2">2</span>康熙王朝</a></p>
                            <p><a href="#"><span class="redian-3">3</span>雍正王朝</a></p>
                            <p><a href="#"><span class="redian-other">4</span>我爱我家</a></p>
                            <p><a href="#"><span class="redian-other">5</span>西游记</a></p>
                            <p><a href="#"><span class="redian-other">6</span>非自然死亡</a></p>
                            <p><a href="#"><span class="redian-other">7</span>姜颂</a></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="pindao" id="jilupian">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/纪录片.jpg">纪录片</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span>
                </div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/纪录片1.webp" alt="推荐">
                        <p>荒野独居：技能大赛<br><span>探险</span></p>
                    </a>
                    <a href="#">
                        <img src="images/纪录片2.webp" alt="推荐">
                        <p>庞贝古城：人民的故事<br><span>人文 / 历史</span></p>
                    </a>
                    <a href="#">
                        <img src="images/纪录片3.webp" alt="推荐">
                        <p>静谧之野 <br><span>人文 / 旅行 / 自然</span></p>
                    </a>
                    <a href="#">
                        <img src="images/纪录片4.webp" alt="推荐">
                        <p>监狱纪实<br><span>社会 / 罪案 / 人文</span></p>
                    </a>
                    <a href="#">
                        <img src="images/纪录片5.webp" alt="推荐">
                        <p>可以跟着去你家吗（精选版）<br><span>人文 / 社会</span></p>
                    </a>
                    <a href="#">
                        <img src="images/纪录片6.webp" alt="推荐">
                        <p>守护解放西3<br><span>社会 / 罪案</span></p>
                    </a>
                    <a href="#">
                        <img src="images/纪录片7.webp" alt="推荐">
                        <p>人生一串 第三季<br><span>美食 / 人文</span></p>
                    </a>
                    <a href="#">
                        <img src="images/纪录片8.webp" alt="推荐">
                        <p>闪闪的儿科医生<br><span>医疗 / 社会</span></p>
                    </a>
                </div>
                <div class="youbu">
                    <div class="paihang">
                        <h2>排行榜</h2>
                        <hr>
                        <div class="paihang">
                            <p><a href="#"><span class="redian-1">1</span>舌尖上的中国4</a></p>
                            <p><a href="#"><span class="redian-2">2</span>你好，12315</a></p>
                            <p><a href="#"><span class="redian-3">3</span>人生海海</a></p>
                            <p><a href="#"><span class="redian-other">4</span>守护解放西5</a></p>
                            <p><a href="#"><span class="redian-other">5</span>闪闪的儿科医生2</a></p>
                            <p><a href="#"><span class="redian-other">6</span>中国通史</a></p>
                            <p><a href="#"><span class="redian-other">7</span>生命奇观</a></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="tuiguang" id="tebietuijian">
            <div class="mingcheng"><span class="pindao-logo"><img src="images/特别推荐.jpg">特别推荐</span>
                <div class="pindao-gongneng"><span><a href="#">换一换</a></span><span><a href="#">更多 ></a></span></div>
            </div>
            <div class="neirong">
                <div class="zuobu">
                    <a href="#">
                        <img src="images/特别推荐1.avif" alt="推荐">
                        <p>回村三天，二舅治好了我的精神内耗<br><br><span>衣戈猜想</span></p>
                    </a>
                    <a href="#">
                        <img src="images/特别推荐2.avif" alt="推荐">
                        <p>破亿纪念!【猛男版】新宝岛 4K高清重置加强版<br><span>猛男舞团IconX</span></p>
                    </a>
                    <a href="#">
                        <img src="images/特别推荐3.avif" alt="推荐">
                        <p>【罗翔】我们为什么要读书？<br><br><span>罗翔说刑法</span></p>
                    </a>
                    <a href="#">
                        <img src="images/特别推荐4.avif" alt="推荐">
                        <p>⚡️ 中 国 人 不 蹦 洋 迪 ⚡️<br><br><span>钓可尔太曼</span></p>
                    </a>
                </div>
                <div class="youbu">
                    <a href="#"><img src="images/特别推荐广告.jpg"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="right-navbar">
        <ul>
            <li><a href="#zhibo" class="current">直播</a></li>
            <li><a href="#donghua">动画</a></li>
            <li><a href="#fanju">番剧</a></li>
            <li><a href="#manhua">漫画</a></li>
            <li><a href="#yinyue">音乐</a></li>
            <li><a href="#wudao">舞蹈</a></li>
            <li><a href="#youxi">游戏</a></li>
            <li><a href="#keji">科技</a></li>
            <li><a href="#shuma">数码</a></li>
            <li><a href="#shenghuo">生活</a></li>
            <li><a href="#dianying">电影</a></li>
            <li><a href="#dianshiju">电视剧</a></li>
            <li><a href="#jilupian">纪录片</a></li>
            <li><a href="#tebietuijian">特别推荐</a></li>
        </ul>
    </div>
</body>
<footer>
    <h2>Bilibili</h2>
    <div id="bilibili">
        <span><a href="#">关于我们</a></span>
        <span><a href="#">联系我们</a></span>
        <span><a href="#">用户协议</a></span>
        <span><a href="#">加入我们</a></span>
        <span><a href="#">友情链接</a></span>
        <span><a href="#">隐私政策</a></span>
        <span><a href="#">bilibili认证</a></span>
        <span><a href="#">Investor Relations</a></span>
    </div>
    <div id="door">
        <span><a href="#">帮助中心</a></span>
        <span><a href="#">高级弹幕</a></span>
        <span><a href="#">活动专题页</a></span>
        <span><a href="#">侵权申诉</a></span>
        <span><a href="#">活动中心</a></span>
        <span><a href="#">用户反馈论坛</a></span>
        <span><a href="#">壁纸站</a></span>
        <span><a href="#">名人堂</a></span>
    </div>
    <div id="attention">
        <p>
            关于 [网站名称] 的素材使用声明及风险提示：
            基于学习目的开发的非商业性网站。本网站仅用于个人或团队学习、练习及技术交流，不涉及任何商业用途。现就素材使用及相关法律责任声明如下：
            一、素材来源与授权说明
            B 站素材使用情况
            本网站在开发过程中，部分素材（如界面布局参考、图标样式、示例视频等）借鉴了哔哩哔哩网站（www.bilibili.com，以下简称 “B 站”）的公开内容，仅用于学习实践中的功能复现和技术验证。
            所有 B 站素材均未用于任何商业传播或盈利活动，且未直接复制 B 站的源代码、数据库或受版权保护的原创内容（如用户创作视频、动漫作品等）。
            素材合法性声明
            本网站使用的 B 站素材均为公开可获取的非涉密内容，且已通过以下方式确保合法性：
            部分素材为自行设计或改编（如重新绘制图标、调整界面配色），未直接使用 B 站的版权素材；
            若涉及 B 站商标、官方标识（如 “小电视” 图标），仅用于学习场景的说明或演示，未以任何形式误导用户认为本网站与 B 站存在关联；
            若使用了 B 站用户创作的公开素材（如视频截图），均已通过 B 站官方渠道获取授权或符合《著作权法》规定的 “合理使用” 情形（如教学、研究目的）。
            二、非商业性学习目的声明
            本网站不提供任何付费服务，不进行广告投放，不获取用户数据用于商业分析，仅作为学生团队的课程作业或技术练习成果展示。
            若因学习需要导致素材使用可能侵犯 B 站或其他第三方权益，本团队承诺在收到权利方通知后 24 小时内删除相关内容，并配合调查。
            三、禁止误导性宣传与责任提示
            用户行为规范
            本网站严禁用户利用平台发布任何声称 “本网站与 B 站存在合作、代理、授权关系” 的误导性信息，或利用 B 站素材进行二次创作后混淆来源。
            法律责任
            本团队深知未经授权使用他人素材的法律风险，仅在学习范围内合理使用素材，并严格遵守《中华人民共和国著作权法》《反不正当竞争法》等法律法规。
            若因素材使用引发法律纠纷，由本团队（学生团队）自行承担全部责任，与 B 站及其他第三方无关。
        </p>
    </div>
</footer>
<script src=work-js.js></script>

</html>